From: Daniel Boles <dboles@src.gnome.org>
Date: Sat, 2 Sep 2017 15:54:47 +0000 (+0100)
Subject: Adwaita: proper colours for inactive emoji buttons
X-Git-Tag: archive/raspbian/3.24.39-1+rpi1~1^2~65^2~39^2~221
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/success//%22http:/www.example.com/cgi/success/?a=commitdiff_plain;h=517b5360f492bad5a313f05d6a4cd78770416f58;p=gtk%2B3.0.git

Adwaita: proper colours for inactive emoji buttons

Use opacity to differentiate unselected/hovered/selected buttons. It had
assumed bg < border < fg colours, which may be false, as in Adwaita:dark

This also means we do not need to special-case for the backdrop state.

https://bugzilla.gnome.org/show_bug.cgi?id=786956
---

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index f8a203adcc..bbe63c2bf9 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4451,15 +4451,14 @@ button.emoji-section {
   &:hover { border-color: $borders_color; }
   &:checked { border-color: $selected_bg_color; }
 
-  color: $borders_color;
-  &:hover { color: mix($fg_color, $borders_color, 50%); }
-  &:checked { color: $fg_color; }
-  &:backdrop { color: $backdrop_borders_color; }
-  &:backdrop:checked { color: $backdrop_fg_color; }
-
   label {
     padding: 0;
+
+    opacity: 0.55;
   }
+
+  &:hover label { opacity: 0.775; }
+  &:checked label { opacity: 1; }
 }
 
 .emoji {
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 011f41bbd2..77dc6fad75 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1900,7 +1900,7 @@ stackswitcher button.circular, stackswitcher button.text-button.circular { min-w
 /********* Emoji * */
 popover.emoji-picker { padding-left: 0; padding-right: 0; }
 
-button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; color: #1b1f20; }
+button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; }
 
 button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
 
@@ -1908,15 +1908,11 @@ button.emoji-section:hover { border-color: #1b1f20; }
 
 button.emoji-section:checked { border-color: #215d9c; }
 
-button.emoji-section:hover { color: #858686; }
+button.emoji-section label { padding: 0; opacity: 0.55; }
 
-button.emoji-section:checked { color: #eeeeec; }
+button.emoji-section:hover label { opacity: 0.775; }
 
-button.emoji-section:backdrop { color: #202425; }
-
-button.emoji-section:backdrop:checked { color: #919494; }
-
-button.emoji-section label { padding: 0; }
+button.emoji-section:checked label { opacity: 1; }
 
 .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }
 
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 73068fc81e..653e931f05 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1920,7 +1920,7 @@ stackswitcher button.circular, stackswitcher button.text-button.circular { min-w
 /********* Emoji * */
 popover.emoji-picker { padding-left: 0; padding-right: 0; }
 
-button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; color: #b6b6b3; }
+button.emoji-section { border-color: transparent; border-width: 3px; border-style: none none solid; border-radius: 0; margin: 2px 4px 2px 4px; padding: 3px 0 0; min-width: 32px; min-height: 28px; /* reset props inherited from the button style */ background: none; box-shadow: none; text-shadow: none; outline-offset: -5px; }
 
 button.emoji-section:backdrop:not(:checked) { border-color: transparent; }
 
@@ -1928,15 +1928,11 @@ button.emoji-section:hover { border-color: #b6b6b3; }
 
 button.emoji-section:checked { border-color: #4a90d9; }
 
-button.emoji-section:hover { color: #727574; }
+button.emoji-section label { padding: 0; opacity: 0.55; }
 
-button.emoji-section:checked { color: #2e3436; }
+button.emoji-section:hover label { opacity: 0.775; }
 
-button.emoji-section:backdrop { color: #c0c0bd; }
-
-button.emoji-section:backdrop:checked { color: #8b8e8f; }
-
-button.emoji-section label { padding: 0; }
+button.emoji-section:checked label { opacity: 1; }
 
 .emoji { font-size: x-large; padding: 6px; border-radius: 6px; }